<!DOCTYPE html>
<meta charset=utf-8>
<title>dialog element: centered alignment</title>
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<link rel=help href="https://html.spec.whatwg.org/multipage/#centered-alignment">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>

<script>
"use strict";

// Be sure to sync with centering-iframe.html
const dialogWidth = 20;
const dialogHeight = 10;

const widthOffset100 = 100 / 2 - dialogWidth / 2;
const widthOffset40 = 40 / 2 - dialogWidth / 2;

const heightOffset100 = 100 / 2 - dialogHeight / 2;
const heightOffset40 = 40 / 2 - dialogHeight / 2;

testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40, widthOffset100, heightOffset40);
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100, widthOffset100, heightOffset100);
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight, 0, 0);

testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100, widthOffset40, heightOffset100);

function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight, leftOffset, topOffset) {
  async_test(t => {
    const iframe = document.createElement("iframe");
    iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}`;
    iframe.width = iframeWidth;
    iframe.height = iframeHeight;
    iframe.onload = t.step_func_done(() => {
      const dialog = iframe.contentDocument.querySelector("dialog");
      const dialogRect = dialog.getBoundingClientRect();

      assert_equals(dialogRect.left, leftOffset, 'left');
      assert_equals(dialogRect.top, topOffset, 'top');
    });
    document.body.appendChild(iframe);
  }, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
     (dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}`);
}
</script>
